<template>
	<view class="app">

		<view class="bgr">
			<img src="https://mp-88683e10-bbf1-4548-9448-f34dfacade6d.cdn.bspapp.com/upload/orderbgr.png" alt="" />
		</view>

		<!-- 提前点餐+我的积分 -->
		<view class="box">
			<view class="box1">
				<img src="https://mp-88683e10-bbf1-4548-9448-f34dfacade6d.cdn.bspapp.com/upload/tqdc.png" alt="" />
			</view>
			<view class="box1" style="margin-left: 9px;">
				<img src="https://mp-88683e10-bbf1-4548-9448-f34dfacade6d.cdn.bspapp.com/upload/wdjf.png" alt="" />
			</view>
		</view>
		<!-- 小图标 -->
		<uni-grid :showBorder="false" :column="4" :highlight="true" @change="change">
			<uni-grid-item v-for="(item, index) in tablist" :index="index" :key="index">
				<view class="grid-item-box" style="background-color: #fff;">
					<!-- <uni-icons type="image" :size="30" color="#777" /> -->
					<image :src="item.icon" class="image" mode="aspectFill" />
					<text class="text">{{item.title}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item,index in swiperlist">
				<view class="swiper-item">
					<image style="width: 100%;height:140px;" :src="item.icon"></image>
				</view>
			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				gutter: 0,
				nvueWidth: 730,
				swiperlist: [{
						icon: "https://mp-88683e10-bbf1-4548-9448-f34dfacade6d.cdn.bspapp.com/upload/sw1.png"
					},
					{
						icon: "https://mp-88683e10-bbf1-4548-9448-f34dfacade6d.cdn.bspapp.com/upload/sw2.png"
					},
					{
						icon: "https://mp-88683e10-bbf1-4548-9448-f34dfacade6d.cdn.bspapp.com/upload/sw3.png"
					}
				],
				tablist: [{
						id: 1,
						title: "优惠卷",
						icon: 'https://mp-88683e10-bbf1-4548-9448-f34dfacade6d.cdn.bspapp.com/upload/优惠卷-copy.png'
					},
					{
						id: 2,
						title: "我的订单",
						icon: 'https://mp-88683e10-bbf1-4548-9448-f34dfacade6d.cdn.bspapp.com/upload/订单.png'
					},
					{
						id: 3,
						title: "我的积分",
						icon: 'https://mp-88683e10-bbf1-4548-9448-f34dfacade6d.cdn.bspapp.com/upload/积分.png'
					},
					{
						id: 4,
						title: "卡余额",
						icon: 'https://mp-88683e10-bbf1-4548-9448-f34dfacade6d.cdn.bspapp.com/upload/余额.png'
					}
				]
			}
		}
	}
</script>

<style lang="less">
	.app {
		// display: flex;
		// justify-content: center;
		height: 100vh;
		position: relative;

		.box {
			// background-color: #ff0;
			transform: translateY(-30%);
			width: 100%;
			height: 160px;
			display: flex;
			justify-content: center;

			.box1 {
				display: inline-block;
				// background-color: #fff;
				// border: 1px solid black;
				border-radius: 50%;
				width: 140px;
				height: 140px;
				text-align: center;

				img {
					border: 1px solid #ccc;
					border-radius: 10%;
					width: 140px;
					height: 140px;
					padding-bottom: 10px;
				}

			}
		}

		.bgr {
			height: 270px;
			background-color: #FCD109;

		}
	}


	.image {
		width: 35px;
		height: 40px;
	}

	.text {
		font-size: 14px;
		margin-top: 10px;
		color: #BDBDBD;
	}

	.uni-grid-item {
		width: 92px !important;
		height: 63px !important;
		border: 1px solid #fff !important;
	}

	.uni-grid-wrap {
		transform: translateY(-50%) !important;
	}

	// /deep/.uni-grid--border{
	// 	border: 1px solid #fff !important;
	// }

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// padding: 15px 0;
	}
</style>